<template>
  <el-form  :model="form" ref="form" label-position="top" label-width="80px">
    <el-row :gutter="30">
      <el-col :span="6">
        <el-form-item :label="$t('config.agent.role')">
          <roles
            :placeholder = "$t('config.agent.pleaseRole')"
            @roleChange = "roleChange"
            :rolefield = "rolefield"
            ref = "role">
          </roles>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('config.agent.agentState')">
          <el-select v-model="form.status"
                     :placeholder="$t('public.pleasePick')"
                     size="mini">
            <el-option :label="$t('public.all')"
                       value=""></el-option>
            <el-option :label="$t('config.agent.reuse')"
                       value="enable"></el-option>
            <el-option :label="$t('config.agent.disable')"
                       value="disable"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('config.agent.agentName')">
          <el-input v-model.trim="form.combox" size="mini"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="所在技能组">
          <el-select v-model="form.skillIds"
            multiple
            filterable
            clearable
            size="mini"
            collapse-tags
            @visible-change="isRenderAgentsTwo"
            placeholder="请选择技能组">
            <el-option
            v-for="item in skillList"
            :label="item.DisplayName"
            :value="item._id"
            :key="item._id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="6">
        <el-form-item :label="$t('agentSetting.agentSetting37')">
          <!-- <el-input v-model.trim="form.beginExten" size="mini"></el-input> -->
          <el-select v-model="form.queryType"
                     :placeholder="$t('agentSetting.agentSetting38')"
                     size="mini">
            <el-option :label="$t('agentSetting.agentSetting38')"
                       value="queryByAgent"></el-option>
            <el-option :label="$t('agentSetting.agentSetting39')"
                       value="queryByExten"></el-option>
            <el-option :label="$t('agentSetting.agentSetting40')"
                       value="queryByNum"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-show="form.queryType !== 'queryByNum'">
        <el-form-item label=" ">
          <!-- <el-input v-model.trim="form.endExten" size="mini"></el-input> -->
          <el-select v-model="selectedAgentList"
                     multiple
                     filterable
                     clearable
                     size="mini"
                     collapse-tags
                     @visible-change="isRenderAgentsTwo"
                     @change="changeAgent"
                     v-show="form.queryType === 'queryByAgent'"
                     :placeholder="$t('report.pleChoseAgent')">
            <el-option label="全选"
                       value="allAgent"></el-option>
            <el-option
              v-for="item in agentOptions1"
              :label="item.label"
              :value="item.value"
              :key="item.value">
            </el-option></el-select>
          <el-input v-show="form.queryType === 'queryByExten'" placeholder="例搜： 2011, 2022, 2033" v-model.trim="extens" size="mini"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3" v-show="form.queryType === 'queryByNum'">
        <el-form-item label=" " class="line">
          <el-input v-model.trim="beginExten" size="mini"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3" v-show="form.queryType === 'queryByNum'">
        <el-form-item label=" ">
          <el-input v-model.trim="endExten" size="mini"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item class="btn-group">
          <el-button @click = "rest" class="primary_btn">{{$t('public.reset')}}</el-button>
          <el-button type="primary" @keyup.native.enter="search" @click="search" class="primary_btn">{{$t('public.search2')}}</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  import Roles from '@/components/public-modules/cache/Roles'
  import Dept from '@/components/public-modules/cache/Dept'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'Form',
    data () {
      return {
        showObj: {
          value: '_id',
          label: 'DisplayName'
        },
        skillGroupList: [],
        skillList: [],
        form: {
          skillIds: [],
          status: '',
          role: '',
          extenNumList: '',
          queryType: 'queryByAgent',
          parentId: '',
          page: '1',
          limit: 10,
          combox: ''
        },
        boolNum: 1, // 点击座席得时候开始渲染计数
        extensArr: [],
        beginExten: '',
        endExten: '',
        selectedAgentList: [],
        extens: '',
        chooseLen: 0,
        agentOptions: [],
        agentOptions1: [], // 点击座席得时候开始渲染存值
        customize: [],
        rolefield: [{
          label: this.$t('public.all'),
          value: ''
        }],
        agent: {
        }
      }
    },
    props: {
    },
    computed: {
    },
    methods: {
      // 点击座席下拉组件开始渲染座席组件(避免首次加载较慢)
      isRenderAgentsTwo (bool) {
        if ((this.boolNum < 2) && bool) {
          this.agentOptions1 = this.agentOptions
          this.boolNum += 1
        }
      },
      changeAgent (extenArr) {
        let num = extenArr.length - 1
        if (extenArr[num] === 'allAgent') {
          this.selectedAgentList = ['allAgent']
          this.agentOptions.map(item => {
            this.selectedAgentList.push(item.value)
          })
        } else {
          let index = extenArr.indexOf('allAgent')
          if (index > -1) {
            extenArr.splice(index, 1)
          } else if (this.chooseLen > this.agentOptions.length && extenArr.length === this.chooseLen - 1) {
            this.selectedAgentList = []
            return
          } else if (extenArr.length === this.agentOptions.length) {
            extenArr.unshift('allAgent')
          }
          this.selectedAgentList = extenArr
        }
        this.chooseLen = this.selectedAgentList.length // 判断点击取消全选还是加全选
      },
      eeroTip (msg) {
        this.$message.error(msg)
      },
      search (form) {
        if (this.form.queryType === 'queryByAgent') {
          let index = this.selectedAgentList.indexOf('allAgent')
          if (index > -1) {
            this.form.extenNumList = ''
          } else {
            this.form.extenNumList = this.selectedAgentList.join(',').replace(/\s/g, '')
          }
        } else if (this.form.queryType === 'queryByExten') {
          if (this.extens) {
            let arr = this.extens.replace(/\s/g, '').split(',')
            let bool = true
            for (let i = 0; i < arr.length; i++) {
              if (!this.extensArr.includes(arr[i])) {
                bool = false
              }
            }
            if (!bool) {
              this.$message.error('输入工号有误')
              return
            }
            this.form.extenNumList = this.extens.replace(/\s/g, '')
          } else {
            this.form.extenNumList = ''
          }
        } else if (this.form.queryType === 'queryByNum') {
          // 判断工号
          let isNum = /^[0-9]*[1-9][0-9]*$/
          if (this.beginExten) {
            if (!isNum.test(this.beginExten)) {
              this.eeroTip('工号必须为数字！')
              return
            } else {
              this.form.extenNumList = `${this.beginExten},`
            }
          }
          if (this.endExten) {
            if (!isNum.test(this.endExten)) {
              this.eeroTip('工号必须为数字！')
              return
            } else {
              if (this.beginExten) {
                this.form.extenNumList += this.endExten
              } else {
                this.form.extenNumList = '' + this.endExten
              }
            }
          }
          if (this.beginExten && this.endExten) {
            if (parseInt(this.beginExten) > parseInt(this.endExten)) {
              this.eeroTip(this.$t('config.agent.extenErroMessage1'))
              return
            }
          }
          if (!this.beginExten && !this.endExten) {
            this.form.extenNumList = ''
          }
        }
        const _form = deepClone(this.form)        
        if (_form.skillIds.length > 0) {
          _form.channelType = 'im'
        }
        this.$emit('search', _form)
      },
      // 重置查询条件
      rest () {
        this.selectedAgentList = []
        this.beginExten = ''
        this.endExten = ''
        this.extens = ''
        this.$refs.role.value = ''
        this.skillGroupList = []
        // this.$refs.agnetSelect.value = ''
        for (let form in this.form) {
          if (form !== 'queryType') {
            this.form[form] = ''
          }
        }
        for (let agent in this.agent) {
          this.agent[agent] = ''
        }
      },
      roleChange (value) {
        this.form.role = value
      }
    },
    components: {
      Dept,
      Roles
    },
    beforeMount () {
      this.form.skillIds = []
      this.$store.dispatch('getCache', { type: 'agents' }).then(agents => {
        agents.map(agent => {
          this.agentOptions.push({ label: `${agent.displayName}[${agent.exten}]`, value: agent.exten, id: agent._id, deptId: agent.deptId ? agent.deptId : '' })
          this.extensArr.push(agent.exten)
        })
      })
      this.$store.dispatch('queryEmailQueueForSkill', {page: 1, limit: 10, Type: 'im', entrance: 'channel'}).then((res) => {
        if (res.success) {
          this.skillList = res.list || []
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .btn-group
    float right
  .line
    position relative
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 20px
      position absolute
      top 32px
      right -24px
  .el-select
    width: 100%;
  .el-col-8
    .el-input
      font-size 12px
</style>
